<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
<title>小样式Style | 小样式Dance Style CSS库</title>
<meta name="keywords" content="小样,小样Style,小样式,DanceStyle,CSS库">
<meta name="description" content="小样式DanceStyle,让你的网页动起来!不仅如此,她还可以变色,呼吸灯,新拟物态,小巧有意思的CSS库，赶快体验一下?">
 <link rel="stylesheet" href="css/jquery.fullPage.css">
 <link rel="stylesheet" href="css/dance.css">
 <link rel="stylesheet" href="css/style.css">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>

</style>
</head>

<body>
<div id="dowebok">
	<div class="section">
		<img src="image/catfllow.png" alt="cat" class="dance-move-a cat">
		<img src="image/smallred.png" alt="red" class="logo dance-moves flash-a-hover">
		<!-- <link rel="stylesheet" href="css/dance.min.css"> -->
		<h2 class="text-c-hover">小样式DanceStyle</h2>
	    <p>This小巧简单有意思的CSS库,复制粘贴到class类即可食用</p>
		<p>字体跳动,图片动画,七彩全息,跑马边框,新拟物态</p>
		<br>
		<!-- <input type="text" value="爱它就给TA ‘.class’"> -->
		<input type="text" value='外部嵌入<link rel="stylesheet" href="https://cdn.ufobank.cn/dance/css/dance.css">' class="big">
		<br>
		<br>
		<a href="css/dance.min.css" class="btn" target="_blank">下载使用</a>
		<img src="image/go.png" alt="bottom" class="go shake">
	</div>
	
    <div class="section">
		<h2>小样式Style</h2>
        <p class="text-b">字体跳动摆动抖动颤抖~</p>
		<!-- <p class="text-b">所有元素均可使用</p> -->
		<!-- <img src="image/catfllow.png" alt="cat" class="move-a"> -->
		<div class="sample">
			<div class="sa-box">
				<div class="text text-a">
					<p>字体 抖动</p>
				</div>
				<div class="code">
					<input type="text" value=" text-a">
				</div>
			</div>
			<div class="sa-box">
				<div class="text text-b">
					<p>字体 滚动</p>
				</div>
				<div class="code">
					<input type="text" value=" text-b">
				</div>
			</div>
			<div class="sa-box">
				<div class="text text-c">
					<p>字体 摇动</p>
				</div>
				<div class="code">
					<input type="text" value=" text-c">
				</div>
			</div>
			<div class="sa-box">
				<div class="text text-d">
					<p>字体 变动</p>
				</div>
				<div class="code">
					<input type="text" value=" text-d">
				</div>
			</div>
			<div class="sa-box">
				<div class="text text-e">
					<p>字体 不动</p>
				</div>
				<div class="code">
					<input type="text" value=" text-e">
				</div>
			</div>
			
			
			<div class="sa-box">
				<div class="text text-f">
					<p class="text text-f-hover">字体 摆动</p>
				</div>
				<div class="code">
					<input type="text" value=" text-f">
				</div>
			</div>
			
			<div class="sa-box">
				<div class="text text-f">
					<p class=" text-f">字体 飘动</p>
				</div>
				<div class="code">
					<input type="text" value=" text-f">
				</div>
			</div>
			<div class="sa-box">
				<div class="text text-a-hover">
					<p>字体 颤抖</p>
				</div>
				<div class="code">
					<input type="text" value=" text-a-hover">
				</div>
			</div>
		</div>
    </div>
    
	<div class="section bg-d">
	    <h2>小样式Style</h2>
	    <p>巴拉啦七彩渐变阴影</p>
	    <div class="sample">
	    	<div class="shadow shadow-a">
				<input type="text" value=" shadow-a">
			</div>
			<div class="shadow shadow-b">
				<input type="text" value=" shadow-b">
			</div>
			<div class="shadow shadow-c">
				<input type="text" value=" shadow-c">
			</div>
			<div class="shadow shadow-d">
				<input type="text" value=" shadow-d">
			</div>
			
			<div class="shadow shadow-a-hover">
				<input type="text" value=" shadow-a-hover">
			</div>
			
			<div class="shadow shadow-e">
				<input type="text" value=" shadow-e">
			</div>
	    </div>
	</div>
	
	<div class="section">
	    <h2>小样式Style</h2>
	    <p>纯色新拟物态</p>
	    <div class="sample">
	    	<div class="neumo neumo-a">
				<input type="text" value=" neumo-a">
			</div>
			<div class="neumo neumo-b">
				<input type="text" value=" neumo-b">
			</div>
			<div class="neumo neumo-c">
				<input type="text" value=" neumo-d">
			</div>
			<div class="neumo neumo-d">
				<input type="text" value=" neumo-e">
			</div>
			<div class="neumo neumo-a-hover">
				<input type="text" value=" neumo-a-hover">
			</div>
			<div class="neumo neumo-e">
				<input type="text" value=" neumo-e">
			</div>
	    </div>
	</div>
	<div class="section">
	    <h2>小样式Style</h2>
	    <p>彩色小圆点-不代表最终效果</p>
	    <div class="sample">
	    	<div class="neumo point-a poa">
				<input type="text" value=" point-a">
			</div>
			<div class="neumo point-c poa">
				<input type="text" value=" point-c">
			</div>
			<div class="neumo point-b poa">
				<input type="text" value=" point-b">
			</div>
			<div class="neumo point-d poa">
				<input type="text" value=" point-d">
			</div>
			<div class="neumo point-a-hover poa">
				<input type="text" value=" point-a-hover">
			</div>
			<div class="neumo point-e poa">
				<input type="text" value=" point-e">
			</div>
	    </div>
	</div>
	<div class="section">
	    <h2>小样式Style</h2>
	    <p>多彩变色新拟物态</p>
	    <div class="sample">
	    	<div class="neumo neumo-f">
				<input type="text" value=" neumo-f">
			</div>
			<div class="neumo neumo-g">
				<input type="text" value=" neumo-g">
			</div>
			<div class="neumo neumo-h">
				<input type="text" value=" neumo-h">
			</div>
			<div class="neumo neumo-i">
				<input type="text" value=" neumo-i">
			</div>
			<div class="neumo neumo-f-hover">
				<input type="text" value=" neumo-f-hover">
			</div>
			<div class="neumo neumo-j">
				<input type="text" value=" neumo-j">
			</div>
	    </div>
	</div>
	
	<!-- <div class="section bg-e">
	    <h2>小样Style</h2>
	    <p>七彩全息变色新拟态</p>
	    <div class="sample">
	    	<div class="neumo neumo-f">
				<input type="text" value=" shadow-f">
			</div>
			<div class="neumo neumo-g">
				<input type="text" value=" shadow-g">
			</div>
			<div class="neumo neumo-h">
				<input type="text" value=" shadow-h">
			</div>
			<div class="neumo neumo-i">
				<input type="text" value=" shadow-i">
			</div>
			<div class="neumo neumo-f-hover">
				<input type="text" value=" shadow-f-hover">
			</div>
			<div class="neumo neumo-j">
				<input type="text" value=" shadow-j">
			</div>
	    </div>
	</div> -->
    <div class="section bg-c">
        <h2>小样式Style</h2>
        <p>多彩渐变梦幻背景</p>
        <div class="sample">
        	<div class="back bgcolor-a">
        		<input type="text" value=" bgcolor-a">
        	</div>
        	<div class="back bgcolor-b">
        		<input type="text" value=" bgcolor-b">
        	</div>
			<div class="back bgcolor-c">
				<input type="text" value=" bgcolor-c">
			</div>
			<div class="back bgcolor-d">
				<input type="text" value=" bgcolor-d">
			</div>
			<div class="back bgcolor-a-hover">
				<input type="text" value=" bgcolor-a-hover">
			</div>
			<div class="back bgcolor-e">
				<input type="text" value=" bgcolor-e">
			</div>
        </div>
    </div>
	<div class="section">
	    <h2>小样式Style</h2>
	    <p>让你的元素频闪</p>
	    <div class="sample">
	    	<div class="neumo neumo-d">
				<b class="flash-a a">◉</b>
				<br>
				<input type="text" value=" flash-a">
			</div>
			<div class="neumo neumo-d">
				<b class="flash-b b">◉</b>
				<br>
				<input type="text" value=" flash-b">
			</div>
			<div class="neumo neumo-d">
				<b class="flash-c c">◉</b>
				<br>
				<input type="text" value=" flash-c">
			</div>
			<div class="neumo neumo-d">
				<b class="flash-d d">◉</b>
				<br>
				<input type="text" value=" flash-d">
			</div>
			<div class="neumo neumo-d">
				<b class="flash-a-hover c">◉</b>
				<br>
				<input type="text" value=" flash-a-hover">
			</div>
			<div class="neumo neumo-d">
				<b class="flash-e e">◉</b>
				<br>
				<input type="text" value=" flash-e">
			</div>
	    </div>
	</div>
	<div class="section bg-a">
		<h2>小样式Style</h2>
		<p>和我一起发现新物种</p>
		<p>-hover依旧可用~</p>
		<br>
		<div class="sample">
			<div class="find">
				<img src="image/ring.png" alt="ring" class="dance-ring">
				<br>
				<input type="text" value=" dance-ring">
			</div>
			<div class="find">
				<img src="image/pink.gif" alt="red" class="dance-shake">
				<br>
				<input type="text" value=" dance-shake">
			</div>
			<div class="find">
				<img src="image/heart.png" alt="ring" class="dance-heart">
				<br>
				<input type="text" value=" dance-heart">
			</div>
			<div class="find">
				<img src="image/lazy sheep1.jpg" alt="red" class="dance-rotate">
				<br>
				<input type="text" value=" dance-rotate">
			</div>
			<div class="find">
				<img src="image/lazy sheep.jpg" alt="red" class="dance-moves">
				<br>
				<input type="text" value=" dance-moves">
			</div>
			<div class="find">
				<img src="image/pandaman.png" alt="red" class="dance-move-a">
				<br>
				<input type="text" value=" dance-move-a">
			</div>
			<div class="find">
				<img src="image/doge.jpg" alt="red" class="dance-move-b">
				<br>
				<input type="text" value=" dance-move-b">
			</div>
			<div class="find">
				<img src="image/smallred.png" alt="red" class="dance-move-c">
				<br>
				<input type="text" value=" dance-move-c">
			</div>
			<div class="find">
				<img src="image/catfllow.png" alt="red" class="dance-move-d">
				<br>
				<input type="text" value=" dance-move-d">
			</div>
			<div class="find">
				<img src="image/fengzheng.png" alt="red" class="dance-move-e">
				<br>
				<input type="text" value=" dance-move-e">
			</div>
		</div>
	</div>
	<div class="section bg-b">
	    <h2>小样式Style</h2>
	    <p>变色の边框</p>
	    <div class="sample">
	    	<div class="border border-a">
				<input type="text" value=" border-a">
			</div>
			<div class="border border-b">
				<input type="text" value=" border-b">
			</div>
			<div class="border border-c">
				<input type="text" value=" border-c">
			</div>
			<div class="border border-d">
				<input type="text" value=" border-d">
			</div>
			
			<div class="border border-a-hover">
				<input type="text" value=" border-a-hover">
			</div>
			
			<div class="border border-e">
				<input type="text" value=" border-e">
			</div>
	    </div>
	</div>
	<div class="section bgcolor-b">
	    
		<h3>使用说明：</h3>
		<br>
		<p>添加到HTML文档的Class类名，如 <mark>&lt;p class=&quot;text-a&quot;&gt;文字燥动&lt;/p&gt;</mark></p>
		<input type="text" value="外部链接 https://cdn.ufobank.cn/dance/css/dance.min.css" class="big">
		<br>
		<br>
		<a href="css/dance.min.css" class="btn text-b" target="_blank">下载使用</a>
		<a href="static/dance.md" class="btn text-b" target="_blank">帮助文档</a>
		<ul>
			<p>注意</p>
			<mark>
				*text-f 是变色文字，需在文字类元素上使用；
				且同时展现效果不可叠加；
				原样式+ -hover 为鼠标样式
			</mark>
		</ul>
		
		<br>
		<h2>小样Style</h2>
		<p>轻量级CSS Style</p>
		<!-- <p>关于我</p> -->
		<a href="https://gitee.com/halle" target="_blank"><img src="image/gitee.svg" alt="gitee"></a>
		<a href="https://www.ufobank.cn" target="_blank"><img src="image/bugbank.png" alt="bugbanK"></a>
		<!-- <a href="https://maosan.fun" target="_blank"><img src="image/maosan.png" alt="maosan"></a> -->
		<p>
			版本:2020.1.5
			添加了一些BUG和问题。
			<br>
			演示效果用于样式参考，不代表最终效果
			<br>
			QQ51543453
			<!-- <br>
			开发者:猫三,请正常使用~
			使用FullPage构建此页面,text类参考于CssShake,其余为纯生Code~ -->
		</p>
		<!-- 友情链接：
		<a href="http://www.bugbank.xyz" target="_blank">BugBank</a>
		<a href="http://hao.bugbank.xyz" target="_blank">上网导航</a>
		<a href="http://ww.maosan.fun" target="_blank">猫三博客</a>
		<a href="http://www.clicli.xyz" target="_blank">C哩C哩</a>
		<a href="http://www.xiaosumu.com" target="_blank">小苏木</a>
		<a href="https://www.maosan.fun/" target="_blank"></a> -->
	</div>
</div>

<script src="js/jquery3.5.1.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(function(){
    $('#dowebok').fullpage({
        sectionsColor : ['#1bbc9b', '#4BBFC3', '#ff557f', '#7BAABE', '#f90', '#aaaaff', '#5da6aa', '#aaaa7f', '#aa557f','#55aa7f']
    });

    $(window).resize(function(){
        autoScrolling();
    });

    function autoScrolling(){
        var $ww = $(window).width();
        if($ww < 1024){
            $.fn.fullpage.setAutoScrolling(false);
        } else {
            $.fn.fullpage.setAutoScrolling(true);
        }
    }

    autoScrolling(true);
});
</script>

</body>
</html>
<!-- author maosan
QQ 51543453 -->